<template>
	<view class="root-view cate-wrap">
		<view class="u-menu-wrap">
			<view class="page-view" >
				<u-tabs name="cate_name" count="cate_count" :list="tabList" :is-scroll="false" :current="tabCurrent" @change="tabChange"></u-tabs>
				<view class="content">
					<view class="u-p-20">时间范围：</view>
					<view class="u-flex u-m-b-20 u-p-l-20">
						<view class="u-m-r-10">
							<u-input placeholder="开始时间" :disabled="true"  v-model="startdate" type="text" :border="true" :height="50" @click="timeShow=true"/>
						</view>
						<text>-</text>
						<view class="u-m-l-10">
							<u-input placeholder="结束时间" :disabled="true" v-model="enddate" type="text" :border="true" :height="50"/>
						</view>
					</view>
					<u-calendar v-model="timeShow" mode="range" @change="selectDate"></u-calendar>
					<!-- <uni-chart ref="uniChart"/> -->
					<qiun-data-charts type="line":opts="opts":chartData="chartData"/>
				</view>
			</view>
		</view>
		<!-- 登录提示 -->
		<shopro-auth-modal></shopro-auth-modal>
	</view>
</template>

<script>
	import homeEmpty from './index/home-empty.vue';
	import { mapMutations, mapActions, mapState } from 'vuex';
	export default {
		components: {
			homeEmpty
		},
		data() {
			return {
				tabList:[{
					cate_name: 'TDS值'
				}, {
					cate_name: '总流量'
				}, {
					cate_name: '剩余流量',
				}],
				startdate:'',
				enddate:'',
				tabCurrent:0,
				timeShow:false,
				option:{},
				optionWater: {},
				optionLastNums:{},
				device_no:'',
				opts: {
					color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					padding: [15,10,0,15],
					enableScroll: false,
					dataLabel:false,
					legend: {},
					xAxis: {
						// disableGrid: true,
						labelCount:5
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				},
				chartData:{}
			};
		},
		onShow() {

		},
		onLoad(opt) {
			this.device_no = opt.device_no;
			
		},
		onReady(){
			this.getData();
		},
		computed: {
			...mapState({
				cuser:({user}) => user.cuser
			})
		},
		methods: {
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			selectDate(e){
				console.log("selectdate",e);
				this.startdate = e.startDate;
				this.enddate = e.endDate;
				this.getData();
			},
			getData(){
				let params = {device_no:this.device_no};
				if(this.startdate){
					params.starttime = this.startdate;
				}
				if(this.enddate){
					params.endtime = this.enddate;
				}
				this.$get("/api/device/get_device_data",params,'',false).then(res => {
					console.log(res.data);
					if(res.code == 1){
						this.option.categories = res.data.category;
						this.option = {
							categories:res.data.category,
							series:[
								{name: '矿化水TDS值',data:res.data.data.dataKhs},
								{name: '纯水TDS值',data:res.data.data.dataCs},
								{name: '进水TDS值',data:res.data.data.dataYs},
							]
						};
						this.optionWater = {
							categories:res.data.category,
							series:[
								{name: '总流量',data: res.data.data.dataWaters}
							]
						};
						this.optionLastNums = {
							categories:res.data.category,
							series:[
								{name: '总流量',data: res.data.data.dataLastNums}
							]
						};
						// this.option = {
						// 	tooltip: { trigger: 'axis'},
						// 	grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},
						// 	legend: { data: ['进水TDS值', '纯水TDS值', '矿化水TDS值']},
						// 	xAxis: {type: 'category',boundaryGap: false,data: res.data.category},
						// 	yAxis: {type: 'value'},
						// 	series: [
						// 		{name: '矿化水TDS值',type: 'line',stack: 'Total',data: res.data.data.dataKhs},
						// 		{name: '纯水TDS值',type: 'line',stack: 'Total',data: res.data.data.dataCs},
						// 		{name: '进水TDS值',type: 'line',stack: 'Total',data: res.data.data.dataYs}
						// 	]
						// };
						// this.optionWater = {
						// 	tooltip: { trigger: 'axis'},
						// 	grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},
						// 	xAxis: {type: 'category',boundaryGap: false,data: res.data.category},
						// 	yAxis: {type: 'value',name:'单位L'},
						// 	series: [
						// 		{name: '总流量',type: 'line',stack: 'Total',data: res.data.data.dataWaters}
						// 	]
						// };
						// this.optionLastNums = {
						// 	tooltip: { trigger: 'axis'},
						// 	grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},
						// 	xAxis: {type: 'category',boundaryGap: false,data: res.data.category},
						// 	yAxis: {type: 'value',name:'单位L'},
						// 	series: [
						// 		{name: '剩余流量',type: 'line',stack: 'Total',data: res.data.data.dataLastNums}
						// 	]
						// };
						this.tabChange(this.tabCurrent);
						// this.$refs.uniChart.setOption(this.option);
					}
					else{
						
					}
				})
			},
			tabChange(e){
				this.tabCurrent = e;
				if(e == 0){
					this.chartData = JSON.parse(JSON.stringify(this.option));
					// this.$refs.uniChart.setOption(this.option);
				}
				else if(e == 1){
					this.chartData = JSON.parse(JSON.stringify(this.optionWater));
					// this.$refs.uniChart.setOption(this.optionWater);
				}
				else if(e == 2){
					this.chartData = JSON.parse(JSON.stringify(this.optionLastNums));
					// this.$refs.uniChart.setOption(this.optionLastNums);
				}
			}
		}
	}
</script>

<style lang="scss" >
	page {
		background-color: #fff;
		height: auto;
	}
	.content {
		width: "100%";
		height: 375px;
	}
	.cate-fab{
		position: fixed;
		right: 24upx;
		bottom: 128upx;
		z-index: 999;
		
		.fab-item{
			width: 80upx;
			height: 80upx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #f48124;
			color: #fff;
			border-radius: 100%;
			font-size: 48upx;
			box-shadow: 0 0 0 4rpx rgba($color: #f48124, $alpha: 0.2);
		}
		
		/* #ifdef H5 */
		bottom:232upx;
		/* #endif */
	}
	.cate-wrap {
		height: calc(100vh);
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top) - 50px);
		/* #endif */
		display: flex;
		flex-direction: column;
	}
	.u-menu-wrap {
		&::before{
			content: " ";
			position: absolute;
			right: 0;
			top: 0;
			left: 0;
			height: 1px;
			background-color:$u-border-color;
			transform: scaleY(.5);
		}
	}
	.u-tab-view {
		position: relative;
		width: 280rpx;
		min-width: 0;
		height: 100%;
		&::after{			content: " ";			position: absolute;			right: 0;
			top: 0;			bottom: 0;			width: 1px;			background-color:$u-border-color;			transform: scaleX(.5);		}
	}
	
	.u-tab-item {
		height:100rpx;
		// background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #777777;
		font-weight: 400;
		line-height: 1;
	}
	
	.u-tab-item-active {
		position: relative;
		color: #fff;
		font-size: 28rpx;
		
		// &::before {
		// 	content: "";
		// 	position: absolute;
		// 	border-left: 4px solid #ff0030;
		// 	height: 32rpx;
		// 	left: 0;
		// 	top: 50%;
		// 	margin-top: -16rpx;
		// }
		.item-lab{
			position: relative;
			z-index: 10;
		}
		&::after {
			content: " ";
			position: absolute;
			height: 60rpx;
			border-radius: 10upx;
			left: 20upx;
			right: 20upx;
			top: 50%;
			margin-top: -30rpx;
			z-index: 0;
			background-color: #f48124;
			transition: .3s;
		}
	}
	
	.u-tab-view {
		height: 100%;
	}
	
	.right-box {
		flex: 1;
		min-width: 0;
		background-color:#fff;
	}
	
	.page-view {
		padding:30upx;
	}
	
	.cate-mod {
		margin-bottom: 40rpx;
	}
	
	.cate-mod:last-child {
		min-height: 100vh;
	}
	.cate-mhead{
		line-height: 40upx;
		margin-bottom: 20upx;
	}
	.cate-madv{
		margin-bottom: 20upx;
	}
	.cate-mbody{
		
	}
	.duc-view {
		margin-top:10rpx; 
	}
	.duc-cell{
		// position: relative;
		margin-bottom: 28upx;
	}
	.duc-item{
		// position: relative;
		padding:24upx 24upx;
		display: flex;
		// align-items: center;
		background-color: #f9f9f9;
		border-radius: 10upx;
		.item-head{
			margin-left: 20upx;
		}
		.item-body{
			flex: 1;
			min-width: 0;
		}
		.item-title{
			font-size: 30upx;
			font-weight: 500;
			margin-bottom:12upx;
			line-height: 36upx;
		}
		.item-text{
			font-size: 24upx;
			color: #999;
			line-height: 36upx;
		}
	}
	.video-item{
		// align-items: center;
		padding-bottom: 0;
	}
</style>
